<!DOCTYPE HTML>
<html lang="zh-Hans" class="light" dir="ltr">
    <head>
        <!-- Book generated using mdBook -->
        <meta charset="UTF-8">
        <title>库结构 - TypeScript 使用指南手册</title>


        <!-- Custom HTML head -->
        
        <meta name="description" content="TypeScript Handbook 中文翻译。">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="theme-color" content="#ffffff">

        <link rel="icon" href="../../favicon.svg">
        <link rel="shortcut icon" href="../../favicon.png">
        <link rel="stylesheet" href="../../css/variables.css">
        <link rel="stylesheet" href="../../css/general.css">
        <link rel="stylesheet" href="../../css/chrome.css">
        <link rel="stylesheet" href="../../css/print.css" media="print">

        <!-- Fonts -->
        <link rel="stylesheet" href="../../FontAwesome/css/font-awesome.css">
        <link rel="stylesheet" href="../../fonts/fonts.css">

        <!-- Highlight.js Stylesheets -->
        <link rel="stylesheet" href="../../highlight.css">
        <link rel="stylesheet" href="../../tomorrow-night.css">
        <link rel="stylesheet" href="../../ayu-highlight.css">

        <!-- Custom theme stylesheets -->

    </head>
    <body class="sidebar-visible no-js">
    <div id="body-container">
        <!-- Provide site root to javascript -->
        <script>
            var path_to_root = "../../";
            var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
        </script>

        <!-- Work around some values being stored in localStorage wrapped in quotes -->
        <script>
            try {
                var theme = localStorage.getItem('mdbook-theme');
                var sidebar = localStorage.getItem('mdbook-sidebar');

                if (theme.startsWith('"') && theme.endsWith('"')) {
                    localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
                }

                if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
                    localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
                }
            } catch (e) { }
        </script>

        <!-- Set the theme before any content is loaded, prevents flash -->
        <script>
            var theme;
            try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
            if (theme === null || theme === undefined) { theme = default_theme; }
            var html = document.querySelector('html');
            html.classList.remove('light')
            html.classList.add(theme);
            var body = document.querySelector('body');
            body.classList.remove('no-js')
            body.classList.add('js');
        </script>

        <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">

        <!-- Hide / unhide sidebar before it is displayed -->
        <script>
            var body = document.querySelector('body');
            var sidebar = null;
            var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
            if (document.body.clientWidth >= 1080) {
                try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
                sidebar = sidebar || 'visible';
            } else {
                sidebar = 'hidden';
            }
            sidebar_toggle.checked = sidebar === 'visible';
            body.classList.remove('sidebar-visible');
            body.classList.add("sidebar-" + sidebar);
        </script>

        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
            <div class="sidebar-scrollbox">
                <ol class="chapter"><li class="chapter-item expanded affix "><a href="../../PREFACE.html">前言</a></li><li class="chapter-item expanded affix "><li class="part-title">快速上手</li><li class="chapter-item expanded "><a href="../../zh/tutorials/index.html"><strong aria-hidden="true">1.</strong> 快速上手</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/tutorials/typescript-in-5-minutes.html"><strong aria-hidden="true">1.1.</strong> 5 分钟了解 TypeScript</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/asp.net-core.html"><strong aria-hidden="true">1.2.</strong> ASP.NET Core</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/asp.net-4.html"><strong aria-hidden="true">1.3.</strong> ASP.NET 4</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/gulp.html"><strong aria-hidden="true">1.4.</strong> Gulp</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/knockout.html"><strong aria-hidden="true">1.5.</strong> Knockout.js</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/react-and-webpack.html"><strong aria-hidden="true">1.6.</strong> React 与 webpack</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/react.html"><strong aria-hidden="true">1.7.</strong> React</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/angular-2.html"><strong aria-hidden="true">1.8.</strong> Angular 2</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/migrating-from-javascript.html"><strong aria-hidden="true">1.9.</strong> 从 JavaScript 迁移到 TypeScript</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">手册</li><li class="chapter-item expanded "><a href="../../zh/handbook/index.html"><strong aria-hidden="true">2.</strong> 手册</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/handbook/basic-types.html"><strong aria-hidden="true">2.1.</strong> 基础类型</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/interfaces.html"><strong aria-hidden="true">2.2.</strong> 接口</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/functions.html"><strong aria-hidden="true">2.3.</strong> 函数</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/literal-types.html"><strong aria-hidden="true">2.4.</strong> 字面量类型</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/unions-and-intersections.html"><strong aria-hidden="true">2.5.</strong> 联合类型和交叉类型</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/classes.html"><strong aria-hidden="true">2.6.</strong> 类</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/enums.html"><strong aria-hidden="true">2.7.</strong> 枚举</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/generics.html"><strong aria-hidden="true">2.8.</strong> 泛型</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">手册（进阶）</li><li class="chapter-item expanded "><a href="../../zh/reference/index.html"><strong aria-hidden="true">3.</strong> 手册（进阶）</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/reference/advanced-types.html"><strong aria-hidden="true">3.1.</strong> 高级类型</a></li><li class="chapter-item expanded "><a href="../../zh/reference/utility-types.html"><strong aria-hidden="true">3.2.</strong> 实用工具类型</a></li><li class="chapter-item expanded "><a href="../../zh/reference/decorators.html"><strong aria-hidden="true">3.3.</strong> Decorators</a></li><li class="chapter-item expanded "><a href="../../zh/reference/declaration-merging.html"><strong aria-hidden="true">3.4.</strong> 声明合并</a></li><li class="chapter-item expanded "><a href="../../zh/reference/iterators-and-generators.html"><strong aria-hidden="true">3.5.</strong> Iterators 和 Generators</a></li><li class="chapter-item expanded "><a href="../../zh/reference/jsx.html"><strong aria-hidden="true">3.6.</strong> JSX</a></li><li class="chapter-item expanded "><a href="../../zh/reference/mixins.html"><strong aria-hidden="true">3.7.</strong> 混入</a></li><li class="chapter-item expanded "><a href="../../zh/reference/modules.html"><strong aria-hidden="true">3.8.</strong> 模块</a></li><li class="chapter-item expanded "><a href="../../zh/reference/module-resolution.html"><strong aria-hidden="true">3.9.</strong> 模块解析</a></li><li class="chapter-item expanded "><a href="../../zh/reference/namespaces.html"><strong aria-hidden="true">3.10.</strong> 命名空间</a></li><li class="chapter-item expanded "><a href="../../zh/reference/namespaces-and-modules.html"><strong aria-hidden="true">3.11.</strong> 命名空间和模块</a></li><li class="chapter-item expanded "><a href="../../zh/reference/symbols.html"><strong aria-hidden="true">3.12.</strong> Symbols</a></li><li class="chapter-item expanded "><a href="../../zh/reference/triple-slash-directives.html"><strong aria-hidden="true">3.13.</strong> 三斜线指令</a></li><li class="chapter-item expanded "><a href="../../zh/reference/type-compatibility.html"><strong aria-hidden="true">3.14.</strong> 类型兼容性</a></li><li class="chapter-item expanded "><a href="../../zh/reference/type-inference.html"><strong aria-hidden="true">3.15.</strong> 类型推论</a></li><li class="chapter-item expanded "><a href="../../zh/reference/variable-declarations.html"><strong aria-hidden="true">3.16.</strong> 变量声明</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">手册（v2）</li><li class="chapter-item expanded "><a href="../../zh/handbook-v2/index.html"><strong aria-hidden="true">4.</strong> 手册（v2）</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/handbook-v2/type-manipulation/template-literal-types.html"><strong aria-hidden="true">4.1.</strong> 模版字面量类型</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">TypeScript 声明文件（.d.ts）</li><li class="chapter-item expanded "><a href="../../zh/declaration-files/index.html"><strong aria-hidden="true">5.</strong> 如何书写声明文件</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/declaration-files/introduction.html"><strong aria-hidden="true">5.1.</strong> 介绍</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/by-example.html"><strong aria-hidden="true">5.2.</strong> 举例</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/library-structures.html" class="active"><strong aria-hidden="true">5.3.</strong> 库结构</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/templates.html"><strong aria-hidden="true">5.4.</strong> 模板</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/do-s-and-don-ts.html"><strong aria-hidden="true">5.5.</strong> 最佳实践</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/deep-dive.html"><strong aria-hidden="true">5.6.</strong> 深入</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/publishing.html"><strong aria-hidden="true">5.7.</strong> 发布</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/consumption.html"><strong aria-hidden="true">5.8.</strong> 使用</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">TypeScript for JavaScript</li><li class="chapter-item expanded "><a href="../../zh/javascript/type-checking-javascript-files.html"><strong aria-hidden="true">6.</strong> JavaScript 文件里的类型检查</a></li><li class="chapter-item expanded affix "><li class="part-title">工程配置</li><li class="chapter-item expanded "><a href="../../zh/project-config/index.html"><strong aria-hidden="true">7.</strong> 工程配置</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/project-config/tsconfig.json.html"><strong aria-hidden="true">7.1.</strong> tsconfig.json</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/project-references.html"><strong aria-hidden="true">7.2.</strong> 工程引用</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/typings-for-npm-packages.html"><strong aria-hidden="true">7.3.</strong> NPM 包的类型</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/compiler-options.html"><strong aria-hidden="true">7.4.</strong> 编译选项</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/configuring-watch.html"><strong aria-hidden="true">7.5.</strong> 配置 Watch</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/compiler-options-in-msbuild.html"><strong aria-hidden="true">7.6.</strong> 在 MSBuild 里使用编译选项</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/integrating-with-build-tools.html"><strong aria-hidden="true">7.7.</strong> 与其它构建工具整合</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/nightly-builds.html"><strong aria-hidden="true">7.8.</strong> 使用 TypeScript 的每日构建版本</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">版本发布说明（Release Notes）</li><li class="chapter-item expanded "><a href="../../zh/release-notes/index.html"><strong aria-hidden="true">8.</strong> 新增功能</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-5.4.html"><strong aria-hidden="true">8.1.</strong> TypeScript 5.4</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-5.3.html"><strong aria-hidden="true">8.2.</strong> TypeScript 5.3</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-5.2.html"><strong aria-hidden="true">8.3.</strong> TypeScript 5.2</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-5.1.html"><strong aria-hidden="true">8.4.</strong> TypeScript 5.1</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-5.0.html"><strong aria-hidden="true">8.5.</strong> TypeScript 5.0</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.9.html"><strong aria-hidden="true">8.6.</strong> TypeScript 4.9</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.8.html"><strong aria-hidden="true">8.7.</strong> TypeScript 4.8</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.7.html"><strong aria-hidden="true">8.8.</strong> TypeScript 4.7</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.6.html"><strong aria-hidden="true">8.9.</strong> TypeScript 4.6</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.5.html"><strong aria-hidden="true">8.10.</strong> TypeScript 4.5</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.4.html"><strong aria-hidden="true">8.11.</strong> TypeScript 4.4</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.3.html"><strong aria-hidden="true">8.12.</strong> TypeScript 4.3</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.2.html"><strong aria-hidden="true">8.13.</strong> TypeScript 4.2</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.1.html"><strong aria-hidden="true">8.14.</strong> TypeScript 4.1</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.0.html"><strong aria-hidden="true">8.15.</strong> TypeScript 4.0</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.9.html"><strong aria-hidden="true">8.16.</strong> TypeScript 3.9</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.8.html"><strong aria-hidden="true">8.17.</strong> TypeScript 3.8</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.7.html"><strong aria-hidden="true">8.18.</strong> TypeScript 3.7</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.6.html"><strong aria-hidden="true">8.19.</strong> TypeScript 3.6</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.5.html"><strong aria-hidden="true">8.20.</strong> TypeScript 3.5</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.4.html"><strong aria-hidden="true">8.21.</strong> TypeScript 3.4</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.3.html"><strong aria-hidden="true">8.22.</strong> TypeScript 3.3</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.2.html"><strong aria-hidden="true">8.23.</strong> TypeScript 3.2</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.1.html"><strong aria-hidden="true">8.24.</strong> TypeScript 3.1</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.0.html"><strong aria-hidden="true">8.25.</strong> TypeScript 3.0</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.9.html"><strong aria-hidden="true">8.26.</strong> TypeScript 2.9</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.8.html"><strong aria-hidden="true">8.27.</strong> TypeScript 2.8</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.7.html"><strong aria-hidden="true">8.28.</strong> TypeScript 2.7</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.6.html"><strong aria-hidden="true">8.29.</strong> TypeScript 2.6</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.5.html"><strong aria-hidden="true">8.30.</strong> TypeScript 2.5</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.4.html"><strong aria-hidden="true">8.31.</strong> TypeScript 2.4</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.3.html"><strong aria-hidden="true">8.32.</strong> TypeScript 2.3</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.2.html"><strong aria-hidden="true">8.33.</strong> TypeScript 2.2</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.1.html"><strong aria-hidden="true">8.34.</strong> TypeScript 2.1</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.0.html"><strong aria-hidden="true">8.35.</strong> TypeScript 2.0</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.8.html"><strong aria-hidden="true">8.36.</strong> TypeScript 1.8</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.7.html"><strong aria-hidden="true">8.37.</strong> TypeScript 1.7</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.6.html"><strong aria-hidden="true">8.38.</strong> TypeScript 1.6</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.5.html"><strong aria-hidden="true">8.39.</strong> TypeScript 1.5</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.4.html"><strong aria-hidden="true">8.40.</strong> TypeScript 1.4</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.3.html"><strong aria-hidden="true">8.41.</strong> TypeScript 1.3</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.1.html"><strong aria-hidden="true">8.42.</strong> TypeScript 1.1</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">破坏性改动（Breaking Changes）</li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/index.html"><strong aria-hidden="true">9.</strong> Breaking Changes</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-3.6.html"><strong aria-hidden="true">9.1.</strong> TypeScript 3.6</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-3.5.html"><strong aria-hidden="true">9.2.</strong> TypeScript 3.5</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-3.4.html"><strong aria-hidden="true">9.3.</strong> TypeScript 3.4</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-3.2.html"><strong aria-hidden="true">9.4.</strong> TypeScript 3.2</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-3.1.html"><strong aria-hidden="true">9.5.</strong> TypeScript 3.1</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-3.0.html"><strong aria-hidden="true">9.6.</strong> TypeScript 3.0</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.9.html"><strong aria-hidden="true">9.7.</strong> TypeScript 2.9</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.8.html"><strong aria-hidden="true">9.8.</strong> TypeScript 2.8</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.7.html"><strong aria-hidden="true">9.9.</strong> TypeScript 2.7</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.6.html"><strong aria-hidden="true">9.10.</strong> TypeScript 2.6</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.4.html"><strong aria-hidden="true">9.11.</strong> TypeScript 2.4</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.3.html"><strong aria-hidden="true">9.12.</strong> TypeScript 2.3</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.2.html"><strong aria-hidden="true">9.13.</strong> TypeScript 2.2</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.1.html"><strong aria-hidden="true">9.14.</strong> TypeScript 2.1</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.0.html"><strong aria-hidden="true">9.15.</strong> TypeScript 2.0</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-1.8.html"><strong aria-hidden="true">9.16.</strong> TypeScript 1.8</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-1.7.html"><strong aria-hidden="true">9.17.</strong> TypeScript 1.7</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-1.6.html"><strong aria-hidden="true">9.18.</strong> TypeScript 1.6</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-1.5.html"><strong aria-hidden="true">9.19.</strong> TypeScript 1.5</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-1.4.html"><strong aria-hidden="true">9.20.</strong> TypeScript 1.4</a></li></ol></li></ol>
            </div>
            <div id="sidebar-resize-handle" class="sidebar-resize-handle">
                <div class="sidebar-resize-indicator"></div>
            </div>
        </nav>

        <!-- Track and set sidebar scroll position -->
        <script>
            var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
            sidebarScrollbox.addEventListener('click', function(e) {
                if (e.target.tagName === 'A') {
                    sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
                }
            }, { passive: true });
            var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
            sessionStorage.removeItem('sidebar-scroll');
            if (sidebarScrollTop) {
                // preserve sidebar scroll position when navigating via links within sidebar
                sidebarScrollbox.scrollTop = sidebarScrollTop;
            } else {
                // scroll sidebar to current active section when navigating via "next/previous chapter" buttons
                var activeSection = document.querySelector('#sidebar .active');
                if (activeSection) {
                    activeSection.scrollIntoView({ block: 'center' });
                }
            }
        </script>

        <div id="page-wrapper" class="page-wrapper">

            <div class="page">
                                <div id="menu-bar-hover-placeholder"></div>
                <div id="menu-bar" class="menu-bar sticky">
                    <div class="left-buttons">
                        <label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
                            <i class="fa fa-bars"></i>
                        </label>
                        <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
                            <i class="fa fa-paint-brush"></i>
                        </button>
                        <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
                            <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
                        </ul>
                        <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>

                    <h1 class="menu-title">TypeScript 使用指南手册</h1>

                    <div class="right-buttons">
                        <a href="../../print.html" title="Print this book" aria-label="Print this book">
                            <i id="print-button" class="fa fa-print"></i>
                        </a>

                    </div>
                </div>

                <div id="search-wrapper" class="hidden">
                    <form id="searchbar-outer" class="searchbar-outer">
                        <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
                    </form>
                    <div id="searchresults-outer" class="searchresults-outer hidden">
                        <div id="searchresults-header" class="searchresults-header"></div>
                        <ul id="searchresults">
                        </ul>
                    </div>
                </div>

                <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
                <script>
                    document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
                    document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
                    Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
                        link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
                    });
                </script>

                <div id="content" class="content">
                    <main>
                        <h1 id="代码库结构"><a class="header" href="#代码库结构">代码库结构</a></h1>
<p>一般来讲，<em>组织</em>声明文件的方式取决于代码库是如何被使用的。
在 JavaScript 中一个代码库有很多使用方式，这就需要你书写声明文件去匹配它们。
这篇指南涵盖了如何识别常见代码库的模式，以及怎样书写符合相应模式的声明文件。</p>
<p>针对代码库的每种主要的组织模式，在<a href="./templates.html">模版</a>一节都有对应的文件。
你可以利用它们帮助你快速上手。</p>
<h2 id="识别代码库的类型"><a class="header" href="#识别代码库的类型">识别代码库的类型</a></h2>
<p>首先，我们先看一下 TypeScript 声明文件能够表示的库的类型。
这里会简单展示每种类型的代码库的使用方式，以及如何去书写，还有一些真实案例。</p>
<p>识别代码库的类型是书写声明文件的第一步。
我们将会给出一些提示，关于怎样通过代码库的<em>使用方法</em>及其<em>源码</em>来识别库的类型。
根据库的文档及组织结构的不同，在这两种方式中可能一个会比另外的一个简单一些。
我们推荐你使用任意你喜欢的方式。</p>
<h2 id="你应该寻找什么"><a class="header" href="#你应该寻找什么">你应该寻找什么？</a></h2>
<p>在为代码库编写声明文件时，你需要问自己以下几个问题。</p>
<ol>
<li>
<p>如何获取代码库？</p>
<p>比如，是否只能够从 npm 或 CDN 获取。</p>
</li>
<li>
<p>如何导入代码库？</p>
<p>它是否添加了某个全局对象？它是否使用了<code>require</code>或<code>import</code>/<code>export</code>语句？</p>
</li>
</ol>
<h2 id="针对不同类型的代码库的示例"><a class="header" href="#针对不同类型的代码库的示例">针对不同类型的代码库的示例</a></h2>
<h3 id="模块化代码库"><a class="header" href="#模块化代码库">模块化代码库</a></h3>
<p>几乎所有的 Node.js 代码库都属于这一类。
这类代码库只能工作在有模块加载器的环境下。
比如，<code>express</code>只能在 Node.js 里工作，所以必须使用 CommonJS 的<code>require</code>函数加载。</p>
<p>ECMAScript 2015（也就是 ES2015，ECMAScript 6 或 ES6），CommonJS 和 RequireJS 具有相似的<em>导入</em>一个<em>模块</em>的写法。
例如，对于 JavaScript CommonJS （Node.js），写法如下：</p>
<pre><code class="language-js">var fs = require('fs');
</code></pre>
<p>对于 TypeScript 或 ES6，<code>import</code>关键字也具有相同的作用：</p>
<pre><code class="language-ts">import * as fs from 'fs';
</code></pre>
<p>你通常会在模块化代码库的文档里看到如下说明：</p>
<pre><code class="language-js">var someLib = require('someLib');
</code></pre>
<p>或</p>
<pre><code class="language-js">define(..., ['someLib'], function(someLib) {

});
</code></pre>
<p>与全局模块一样，你也可能会在 <a href="#umd">UMD</a> 模块的文档里看到这些例子，因此要仔细查看源码和文档。</p>
<h4 id="从代码上识别模块化代码库"><a class="header" href="#从代码上识别模块化代码库">从代码上识别模块化代码库</a></h4>
<p>模块化代码库至少会包含以下代表性条目之一：</p>
<ul>
<li>无条件的调用<code>require</code>或<code>define</code></li>
<li>像<code>import * as a from 'b';</code>或<code>export c;</code>这样的声明</li>
<li>赋值给<code>exports</code>或<code>module.exports</code></li>
</ul>
<p>它们极少包含：</p>
<ul>
<li>对<code>window</code>或<code>global</code>的赋值</li>
</ul>
<h4 id="模块化代码库的模版"><a class="header" href="#模块化代码库的模版">模块化代码库的模版</a></h4>
<p>有以下四个模版可用：</p>
<ul>
<li><a href="./templates/module.d.ts.html"><code>module.d.ts</code></a></li>
<li><a href="./templates/module-class.d.ts.html"><code>module-class.d.ts</code></a></li>
<li><a href="./templates/module-function.d.ts.html"><code>module-function.d.ts</code></a></li>
<li><a href="./templates/module-plugin.d.ts.html"><code>module-plugin.d.ts</code></a></li>
</ul>
<p>你应该先阅读<a href="./templates/module.d.ts.html"><code>module.d.ts</code></a>以便从整体上了解它们的工作方式。</p>
<p>然后，若一个模块可以当作函数调用，则使用<a href="./templates/module-function.d.ts.html"><code>module-function.d.ts</code></a>。</p>
<pre><code class="language-js">const x = require('foo');
// Note: calling 'x' as a function
const y = x(42);
</code></pre>
<p>如果一个模块可以使用<code>new</code>来构造，则使用<a href="./templates/module-class.d.ts.html"><code>module-class.d.ts</code></a>。</p>
<pre><code class="language-js">var x = require('bar');
// Note: using 'new' operator on the imported variable
var y = new x('hello');
</code></pre>
<p>如果一个模块在导入后会更改其它的模块，则使用<a href="./templates/module-plugin.d.ts.html"><code>module-plugin.d.ts</code></a>。</p>
<pre><code class="language-js">const jest = require('jest');
require('jest-matchers-files');
</code></pre>
<h3 id="全局代码库"><a class="header" href="#全局代码库">全局代码库</a></h3>
<p>全局代码库可以通过全局作用域来访问（例如，不使用任何形式的<code>import</code>语句）。
许多代码库只是简单地导出一个或多个供使用的全局变量。
比如，如果你使用<a href="https://jquery.com/">jQuery</a>，那么可以使用<code>$</code>变量来引用它。</p>
<pre><code class="language-ts">$(() =&gt; {
    console.log('hello!');
});
</code></pre>
<p>你通常能够在文档里看到如何在 HTML 的 script 标签里引用代码库：</p>
<pre><code class="language-html">&lt;script src="http://a.great.cdn.for/someLib.js"&gt;&lt;/script&gt;
</code></pre>
<p>目前，大多数流行的全局代码库都以 UMD 代码库发布。
UMD 代码库与全局代码库很难通过文档来识别。
在编写全局代码库的声明文件之前，确保代码库不是 UMD 代码库。</p>
<h4 id="从代码来识别全局代码库"><a class="header" href="#从代码来识别全局代码库">从代码来识别全局代码库</a></h4>
<p>通常，全局代码库的代码十分简单。
一个全局的“Hello, world”代码库可以如下：</p>
<pre><code class="language-js">function createGreeting(s) {
    return 'Hello, ' + s;
}
</code></pre>
<p>或者这样：</p>
<pre><code class="language-js">window.createGreeting = function (s) {
    return 'Hello, ' + s;
};
</code></pre>
<p>在阅读全局代码库的代码时，你会看到：</p>
<ul>
<li>顶层的<code>var</code>语句或<code>function</code>声明</li>
<li>一个或多个<code>window.someName</code>赋值语句</li>
<li>假设 DOM 相关的原始值<code>document</code>或<code>window</code>存在</li>
</ul>
<p>你不会看到：</p>
<ul>
<li>检查或使用了模块加载器，如<code>require</code>或<code>define</code></li>
<li>CommonJS/Node.js 风格的导入语句，如<code>var fs = require("fs");</code></li>
<li><code>define(...)</code>调用</li>
<li>描述<code>require</code>或导入代码库的文档</li>
</ul>
<h4 id="全局代码库的示例"><a class="header" href="#全局代码库的示例">全局代码库的示例</a></h4>
<p>由于将全局代码库转换为 UMD 代码库十分容易，因此很少有代码库仍然使用全局代码库风格。
然而，小型的代码库以及需要使用 DOM 的代码库仍然可以是全局的。</p>
<h4 id="全局代码库的模版"><a class="header" href="#全局代码库的模版">全局代码库的模版</a></h4>
<p>模版文件<a href="../doc/handbook/declaration%20files/templates/global.d.ts.html"><code>global.d.ts</code></a>定义了<code>myLib</code>示例代码库。
请务必阅读<a href="#es6-%E5%AF%B9%E6%A8%A1%E5%9D%97%E8%B0%83%E7%94%A8%E7%AD%BE%E5%90%8D%E7%9A%84%E5%BD%B1%E5%93%8D">脚注："防止命名冲突"</a>。</p>
<h3 id="umd"><a class="header" href="#umd">UMD</a></h3>
<p>一个 UMD 模块既可以用作 ES 模块（使用导入语句），也可以用作全局变量（在缺少模块加载器的环境中使用）。
许多流行的代码库，如<a href="http://momentjs.com/">Moment.js</a>，都是使用这模式发布的。
例如，在 Node.js 中或使用了 RequireJS 时，你可以这样使用：</p>
<pre><code class="language-ts">import moment = require('moment');
console.log(moment.format());
</code></pre>
<p>在纯浏览器环境中，你可以这样使用：</p>
<pre><code class="language-js">console.log(moment.format());
</code></pre>
<h3 id="识别-umd-代码库"><a class="header" href="#识别-umd-代码库">识别 UMD 代码库</a></h3>
<p><a href="https://github.com/umdjs/umd">UMD 模块</a>会检查运行环境中是否存在模块加载器。
这是一种常见模式，示例如下：</p>
<pre><code class="language-js">(function (root, factory) {
    if (typeof define === "function" &amp;&amp; define.amd) {
        define(["libName"], factory);
    } else if (typeof module === "object" &amp;&amp; module.exports) {
        module.exports = factory(require("libName"));
    } else {
        root.returnExports = factory(root.libName);
    }
}(this, function (b) {
</code></pre>
<p>如果你看到代码库中存在类如<code>typeof define</code>，<code>typeof window</code>或<code>typeof module</code>的检测代码，尤其是在文件的顶端，那么它大概率是 UMD 代码库。</p>
<p>在 UMD 模块的文档中经常会提供在 Node.js 中结合<code>require</code>使用的示例，以及在浏览器中结合<code>&lt;script&gt;</code>标签使用的示例。</p>
<h3 id="umd-代码库的示例"><a class="header" href="#umd-代码库的示例">UMD 代码库的示例</a></h3>
<p>大多数流行的代码库均提供了 UMD 格式的包。
例如，<a href="https://jquery.com/">jQuery</a>，<a href="http://momentjs.com/">Moment.js</a>和<a href="https://lodash.com/">lodash</a>等。</p>
<h4 id="模版"><a class="header" href="#模版">模版</a></h4>
<p>使用<a href="./templates/module-plugin.d.ts.html"><code>module-plugin.d.ts</code></a>模版。</p>
<h3 id="全局插件"><a class="header" href="#全局插件">全局插件</a></h3>
<p>一个<em>全局插件</em>是全局代码，它们会改变全局对象的结构。 对于<em>全局修改的模块</em>，在运行时存在冲突的可能。</p>
<p>比如，一些库往<code>Array.prototype</code>或<code>String.prototype</code>里添加新的方法。</p>
<h4 id="识别全局插件"><a class="header" href="#识别全局插件">识别全局插件</a></h4>
<p>全局通常很容易地从它们的文档识别出来。</p>
<p>你会看到像下面这样的例子：</p>
<pre><code class="language-javascript">var x = 'hello, world';
// Creates new methods on built-in types
console.log(x.startsWithHello());

var y = [1, 2, 3];
// Creates new methods on built-in types
console.log(y.reverseAndSort());
</code></pre>
<h4 id="模版-1"><a class="header" href="#模版-1">模版</a></h4>
<p>使用<a href="../doc/handbook/declaration%20files/templates/global-plugin.d.ts.html"><code>global-plugin.d.ts</code></a>模版。</p>
<h3 id="全局修改的模块"><a class="header" href="#全局修改的模块">全局修改的模块</a></h3>
<p>当一个<em>全局修改的模块</em>被导入的时候，它们会改变全局作用域里的值。 比如，存在一些库它们添加新的成员到<code>String.prototype</code>当导入它们的时候。 这种模式很危险，因为可能造成运行时的冲突， 但是我们仍然可以为它们书写声明文件。</p>
<h4 id="识别全局修改的模块"><a class="header" href="#识别全局修改的模块">识别全局修改的模块</a></h4>
<p>全局修改的模块通常可以很容易地从它们的文档识别出来。 通常来讲，它们与全局插件相似，但是需要<code>require</code>调用来激活它们的效果。</p>
<p>你可能会看到像下面这样的文档:</p>
<pre><code class="language-javascript">// 'require' call that doesn't use its return value
var unused = require('magic-string-time');
/* or */
require('magic-string-time');

var x = 'hello, world';
// Creates new methods on built-in types
console.log(x.startsWithHello());

var y = [1, 2, 3];
// Creates new methods on built-in types
console.log(y.reverseAndSort());
</code></pre>
<h4 id="模版-2"><a class="header" href="#模版-2">模版</a></h4>
<p>使用<a href="../doc/handbook/declaration%20files/templates/global-modifying-module.d.ts.html"><code>global-modifying-module.d.ts</code></a>模版。</p>
<h2 id="利用依赖"><a class="header" href="#利用依赖">利用依赖</a></h2>
<p>你的代码库可能会有若干种依赖。
本节会介绍如何在声明文件中导入它们。</p>
<h3 id="对全局库的依赖"><a class="header" href="#对全局库的依赖">对全局库的依赖</a></h3>
<p>如果你的代码库依赖于某个全局代码库，则使用<code>/// &lt;reference types="..." /&gt;</code>指令：</p>
<pre><code class="language-ts">/// &lt;reference types="someLib" /&gt;

function getThing(): someLib.thing;
</code></pre>
<h3 id="对模块的依赖"><a class="header" href="#对模块的依赖">对模块的依赖</a></h3>
<p>如果你的代码库依赖于某个模块，则使用<code>import</code>语句：</p>
<pre><code class="language-ts">import * as moment from 'moment';

function getThing(): moment;
</code></pre>
<h3 id="对-umd-模块的依赖"><a class="header" href="#对-umd-模块的依赖">对 UMD 模块的依赖</a></h3>
<h4 id="全局代码库-1"><a class="header" href="#全局代码库-1">全局代码库</a></h4>
<p>如果你的全局代码库依赖于某个 UMD 模块，则使用<code>/// &lt;reference types</code>指令：</p>
<pre><code class="language-ts">/// &lt;reference types="moment" /&gt;

function getThing(): moment;
</code></pre>
<h4 id="es-模块或-umd-模块代码库"><a class="header" href="#es-模块或-umd-模块代码库">ES 模块或 UMD 模块代码库</a></h4>
<p>如果你的模块或 UMD 代码库依赖于某个 UMD 代码库，则使用<code>import</code>语句：</p>
<pre><code class="language-ts">import * as someLib from 'someLib';
</code></pre>
<p>不要使用<code>/// &lt;reference</code>指令来声明对 UMD 代码库的依赖。</p>
<h2 id="脚注"><a class="header" href="#脚注">脚注</a></h2>
<h3 id="防止命名冲突"><a class="header" href="#防止命名冲突">防止命名冲突</a></h3>
<p>注意，虽说可以在全局作用域内定义许多类型。
但我们强烈建议不要这样做，因为当一个工程中存在多个声明文件时，它可能会导致难以解决的命名冲突。</p>
<p>可以遵循的一个简单规则是使用代码库提供的某个全局变量来声明拥有命名空间的类型。
例如，如果代码库提供了全局变量<code>cats</code>，那么可以这样写：</p>
<pre><code class="language-ts">declare namespace cats {
    interface KittySettings {}
}
</code></pre>
<p>而不是：</p>
<pre><code class="language-ts">// at top-level
interface CatsKittySettings {}
</code></pre>
<p>这样做会保证代码库可以被转换成 UMD 模块，且不会影响声明文件的使用者。</p>
<h3 id="es6-对模块插件的影响"><a class="header" href="#es6-对模块插件的影响">ES6 对模块插件的影响</a></h3>
<p>一些插件会对已有模块的顶层导出进行添加或修改。
这在 CommonJS 以及其它模块加载器里是合法的，但 ES6 模块是不可改变的，因此该模式是不可行的。
因为，TypeScript 是模块加载器无关的，所以在编译时不会对该行为加以限制，但是开发者若想要转换到 ES6 模块加载器则需要注意这一点。</p>
<h3 id="es6-对模块调用签名的影响"><a class="header" href="#es6-对模块调用签名的影响">ES6 对模块调用签名的影响</a></h3>
<p>许多代码库，如 Express，将自身导出为可调用的函数。
例如，Express 的典型用法如下：</p>
<pre><code class="language-ts">import exp = require('express');
var app = exp();
</code></pre>
<p>在 ES6 模块加载器中，顶层对象（此例中就<code>exp</code>）只能拥有属性；
顶层的模块对象永远不能够被调用。</p>
<p>最常见的解决方案是为可调用的/可构造的对象定义一个<code>default</code>导出；
有些模块加载器会自动检测这种情况并且将顶层对象替换为<code>default</code>导出。
如果在 tsconfig.json 里启用了<a href="/tsconfig/#esModuleInterop"><code>"esModuleInterop": true</code></a>，那么 Typescript 会自动为你处理。</p>

                    </main>

                    <nav class="nav-wrapper" aria-label="Page navigation">
                        <!-- Mobile navigation buttons -->
                            <a rel="prev" href="../../zh/declaration-files/by-example.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                                <i class="fa fa-angle-left"></i>
                            </a>

                            <a rel="next prefetch" href="../../zh/declaration-files/templates.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                                <i class="fa fa-angle-right"></i>
                            </a>

                        <div style="clear: both"></div>
                    </nav>
                </div>
            </div>

            <nav class="nav-wide-wrapper" aria-label="Page navigation">
                    <a rel="prev" href="../../zh/declaration-files/by-example.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                        <i class="fa fa-angle-left"></i>
                    </a>

                    <a rel="next prefetch" href="../../zh/declaration-files/templates.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                        <i class="fa fa-angle-right"></i>
                    </a>
            </nav>

        </div>




        <script>
            window.playground_copyable = true;
        </script>


        <script src="../../elasticlunr.min.js"></script>
        <script src="../../mark.min.js"></script>
        <script src="../../searcher.js"></script>

        <script src="../../clipboard.min.js"></script>
        <script src="../../highlight.js"></script>
        <script src="../../book.js"></script>

        <!-- Custom JS scripts -->


    </div>
    </body>
</html>
